<template>
  <view class="pet-fr-it" @click="goToOtherPage(`/user/center?id=${props.item.customerId}`)">
    <image class="avater" :src="props.item.face"/>
    <view class="mai-c">
      <view class="name-c">
        <view class="n-lf">
          <text class="nick">{{ props.item.nickname }}</text>
          <text style="margin-left: 20rpx" :style="{color: props.item.sex === 1 ? '#3289CA' : '#F0831E'}">{{ props.item.sex === 1 ? '男' : props.item.sex === 2 ? '女' : '' }}</text>
        </view>
        <view class="texs-lc" :style="{color: props.orgin ? '#000' : '#3289CA', fontWeight: props.orgin ? 'normal' : 'bold'}">{{ getDistance(props.item.distance) }}</view>
      </view>
      <view class="dynamic-state u-line-1">{{ props.item.petNames }}</view>
    </view>
</view>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  orgin: {
    type: String,
    default: ''
  }
})
const getDistance = distance => {
  distance = distance || 0
  return distance < 1 ? (distance * 1000).toFixed(2) + 'm' : distance.toFixed(2) + 'km'
}
const goToOtherPage = (url) => {
  uni.navigateTo({
    url
  })
}
</script>

<style scoped lang="scss">
.pet-fr-it{
  display: flex;
  padding: 30rpx 30rpx 30rpx 20rpx;
  border-radius: 20rpx;
  background: #FFF;
  margin-bottom: 10rpx;
  height: 140rpx;
  .avater{
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  .mai-c{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 560rpx;
    padding-left: 20rpx;
  }
  .name-c{
    display: flex;
    align-items: center;
    line-height: 34rpx;
    justify-content: space-between;
    .nick{
      margin-right: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #414141;
    }
    .n-lf{
      display:flex;
      align-items:center;
      line-height: 28rpx
    }
  }
  .dynamic-state{
    font-size: 24rpx;
    color: #999;
    line-height: 30rpx;
  }
  .texs-lc{
    color: #3289CA;
    font-size: 24rpx;
    font-weight: bold;
  }
}
</style>
